<template>
  <div class="home">
    <header style="position:fixed;top:0;left:0;width:100%;background-color:#fff;z-index:9999;">
      <div class="index_header">
        <div class="city">

                        <span class="top_address" @tap="go_page('/')">
                            <i class="mui-icon mui-icon-back"></i>返回
                        </span>

        </div>
        <div class="search" @click="open_search_view(true)">
          <i class="mui-icon mui-icon-search"></i>
          <input type="text"  disabled="disabled" placeholder="请输入关键词搜索..."/>
          <i class="mui-icon mui-icon-closeempty"></i>
        </div>
      </div>
    </header>
    <div class="content">
      <!--banner-->
      <div id="slider" class="mui-slider">
        <div class="mui-slider-group mui-slider-loop">
          <!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
          <div class="mui-slider-item mui-slider-item-duplicate">
            <a>
              <img :src="first_banner">
            </a>
          </div>
          <!-- 第一张 -->
          <div class="mui-slider-item" v-for="(i,k) in banner_list" :key="k">
            <a>
              <img :src="i.pic" @tap="go_goods_detail(i.url)">
            </a>
          </div>
          <!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
          <div class="mui-slider-item mui-slider-item-duplicate">
            <a>
              <img :src="last_banner">
            </a>
          </div>
        </div>
        <div class="mui-slider-indicator">
          <div class="mui-indicator"></div>
        </div>
      </div>
      <!--导航-->
      <div class="index_nav">
        <ul>
          <li v-for="(i,k) in shop_home_menu" @tap="to_class_page(k)" :key="k">
            <img :src="i.logo"/>
            <span>{{i.name}}</span>
          </li>

        </ul>
        <div class="clear"></div>
      </div>
      <div class="hr_10"></div>
      <!--活动-->
      <div class="huodong">
        <div class="project">
          <div class="p_title">{{shop_home_chanel_names[0].title}}
            <!--<span class="p_title_en">This welfare</span>-->
          </div>
          <div class="bottom_line">
            <div class="line_b"></div>
          </div>
          <div class="p_body">
            <div class="fuli_item" v-for="(i,k) in shop_home_model_pic" :key="k">
              <router-link :to="i.link">
                <img :src="i.url" alt="">
              </router-link>
            </div>
          </div>
        </div>
        <div class="hr_10"></div>
        <div class="project ">
          <div class="p_title">{{shop_home_chanel_names[1].title}}</div>
          <div class="bottom_line">
            <div class="line_b"></div>
          </div>
        </div>
        <!--商品-->
        <div class="index_shop">
          <div class="con">
            <ul>
              <li v-for="(i,k) in goods_list" @tap="go_goods_detail(i.goodsid)" :key="k">
                <p class="img">
                  <img :src="i.pic"/>
                </p>
                <p class="t  ttt" style="
                  display: -webkit-box;
                  -webkit-box-orient: vertical;
                  box-orient: vertical;
                  -webkit-line-clamp: 2;
                  line-clamp: 2;
                  overflow: hidden;

  ">{{i.name}}</p>
                <p class="t2">
                  <span class="l">￥{{i.min_price.toFixed(2)}}</span>
                </p>
              </li>

            </ul>
          </div>
          <div class="clear"></div>
        </div>
      </div>


    </div>


  </div>
</template>
<script>
  import goods_ajax from '../../ajax/goods_ajax';
  import home_ajax from "../../ajax/home_ajax";
  import goods_class_ajax from '../../ajax/goods_class_ajax'

  export default {
    name: "home",
    data() {
      return {
        banner_list: [],
        first_banner: '',
        last_banner: '',

        shop_home_menu: [],
        goods_list: [],
        shop_home_model_pic:[],
        shop_home_chanel_names:''
      }
    },
    methods: {
      go_page(path) {
        this.$router.push(path)
      },
      go_goods_detail(goodsid) {
        this.$router.push("/shop/goods_list/goods?goodsid=" + goodsid)
      },
      open_search_view(tf) {
        this.$store.commit("open_search_view", tf)
      },
      to_class_page(k) {
        // 改变状态管理种的 当前分类下标即可 footer会监听这个值去自动切换
        this.$store.commit("updata_class_active_index", k)
      },
      shop_home_data_init() {
        // 获取商城banner图
        goods_ajax.get_shop_banner({
          bid: this.$store.state.account.community.sqid,
          type: 1
        }, res => {
          if (res.length > 0) {
            this.banner_list = res;
            this.first_banner = res[0];
            this.last_banner = res[res.length - 1]
          }
        });
        // 获取商城首页菜单
        goods_class_ajax.get_goods_class_lv1({
          bid: this.$store.state.account.community.sqid
        }, res => {
          if (res.length > 0) {
            this.shop_home_menu = res;
            this.$store.commit("updata_class_list", res);
          }
        })
        // 获取商城首页商品信息
        goods_ajax.get_shop_home_goods({
          bid: this.$store.state.account.community.sqid,
          type: 2
        }, res => {
          if (res.length > 0) {
            this.goods_list = res;
          }
        })
        // 获取商城首页的特卖 拼团 模块图片
        home_ajax.get_shop_home_model_pic({
          bid:this.$store.state.account.community.sqid
        },res=>{
          res[0].link="/shop/goods_list?type=youxiangtemai";
          res[1].link="/shop/group_list"
          this.shop_home_model_pic = res;
          this.$store.commit("updata_shop_home_chanel_names",res)
        })
        // 获取栏目名称
        home_ajax.get_shop_home_chanel_name({
          bid:this.$store.state.account.community.sqid
        },res=>{
          this.shop_home_chanel_names = res;

        })

      }
    },
    created() {
      this.shop_home_data_init()
    },
    mounted() {

    },

  };
</script>
<style lang="less" scoped>
  @import "../../../static/pxvalue.less";
  @import "../../assets/less/shop/shop_home.less";
</style>
